<template>
  <div class="form-data">
    <!-- 表单收集 -->
    <div class="my-data-detail-title" v-if="exportData.total > 0">
      表单收集
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="formTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
      <div class="btn-export-con">
        <span>{{ curSiteData.time }}</span>
      </div>
    </div>
    <FormDataList></FormDataList>

    <!-- 提交表单数据 -->
    <div class="my-data-detail-title">
      提交表单数据
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="submitFoemData"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
    </div>
    <FormDataTable></FormDataTable>

    <!-- 抽奖结果 -->
    <div class="my-data-detail-title" v-if="isLottery">
      抽奖结果
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="formTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
      <div class="btn-export-con">
        <span>{{ curSiteData.time }}</span>
      </div>
    </div>
    <div v-if="isLottery">
      <el-button @click.stop="onGetExportData">抽奖结果</el-button>
      <iframe src="" ref="iframe"></iframe>
    </div>
  </div>
</template>

<script>
import FormDataList from "./form-data-list.vue";
import FormDataTable from "./form-data-table.vue";
import { useWebUserStore } from "@/store/web/user";
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";
import { useWebControlsStore } from "@/store/web/controls";
const useWebUser = useWebUserStore();
const useControls = useWebControlsStore();
const useWebDataAnalysis = useWebDataAnalysisStore();

export default {
  setup() {
    return {
      // tips
      formTips: "表单数据下载",
      submitFoemData: "提交表单数据",
    };
  },
  props: ["site_id"],
  computed: {
    detailNavPrev() {
      return useWebDataAnalysis.detailNavPrev;
    },
    isLottery() {
      return useControls.isLottery;
    },
    exportData() {
      return useWebDataAnalysis.exportData;
    },
    curSiteData() {
      return useWebUser.mySite4Data;
    },
  },
  components: {
    FormDataList,
    FormDataTable,
  },
  beforeMount() {
    // 获取 表单收集 数据
    useWebDataAnalysis.exportDataTotal({
      site_id: this.site_id,
      table: "com_form",
    });
  },
  methods: {
    onGetExportData() {
      // iframe 跳转页面 下载数据
      this.$refs.iframe.src =
        this.env.apiUrl +
        "/stat/expdata?site_id=" +
        this.exportData.site_id +
        "&table=com_lottery";
    },
  },
};
</script>

<style lang="scss" scoped>
iframe {
  display: none;
}
</style>
